<!--  -->
<template>
  <div>
    <div class="order-item" >
    <div class="title flex-j-sb">
      <div class="left flex-a-c">
        <div class="title-icon-bg">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/shop_head.png" mode="widthFix" />
        </div>
        <div class="title-name">{{ setItem.shop_name }}</div>
        <div class="iconfont icon-member_right"></div>
      </div>
      <div class="right">{{ setItem.status_name }}</div>
    </div>
    <div class="card-wrap flex" @click="ondetails(setItem.id)">
      <div class="img">
        <img :src="setItem.has_many_order_goods[0] && setItem.has_many_order_goods[0].thumb" />
      </div>
      <div class="card-main flex">
        <div class="flex-j-sb flex-a-c flex-w">
          <div class="name ell">{{ setItem.has_many_order_goods[0] && setItem.has_many_order_goods[0].title }}</div>
          <div class="price">¥ {{ setItem.has_many_order_goods[0] && setItem.has_many_order_goods[0].price }}</div>
        </div>
        <div class="num">x{{ setItem.has_many_order_goods[0] && setItem.has_many_order_goods[0].total }}</div>
        <div class="time" v-if="setItem.status !== 0 && setItem.status !== -1">消费时间{{ setItem.pay_time }}</div>
      </div>
    </div>
    <div class="order-footer flex">
      <div class="total">合计 ：￥{{ setItem.has_many_order_goods[0] && setItem.has_many_order_goods[0].payment_amount }}</div>
      <div class="order-btns flex-a-c" v-if="this.fun.getKey('client') !== 'work'">
          <div v-for="(itemBtn, btnIndex) in setItem.button_models" :key="btnIndex"
            class="order-buy btn flex-a-c flex-j-c"
            v-if="itemBtn.value !== 'coupon_store_refund_page' && itemBtn.value !== 28"
            :class="itemBtn.value === 1 || itemBtn.value === 'coupon_store_order_detail' || itemBtn.value === 'coupon_store_rebuy' ? 'order-evaluate' : ''"
            @click="orderstateOn(itemBtn.value, setItem.id, setItem.has_many_order_goods[0].goods_id, setItem.refund_id, itemBtn.api, setItem.has_many_order_goods[0].title)"
          >
            {{ itemBtn.name }}
          </div>
      </div>
    </div>
  </div>
  <div class="mb20" :style="{'borderTop':client || orderType?'1px solid #ccc':'none'}"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    setItem: {
      type: Object,
      default: () => {
        return {};
      }
    },
    client: {
      type:String
    },
    orderType: {
      type:String
    }
  },
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    ondetails(id) {
      this.$emit('ondetails', id);
    },
    orderstateOn(...params) {
      this.$emit('orderstateOn', ...params);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数 */
  overflow: hidden;
}

.mb20 {
  height: 0.625rem;
  clear: both;
}

.order-item {
  background-color: #fff;
  padding: 0.8125rem 0.625rem;
  border-radius: 0.3125rem;
}

.order-item .title {
  align-items: center;
}

.title-icon-bg {
  width: 1.0625rem;
  height: 1.0625rem;
  margin-right: 0.3125rem;

  img {
    width: 1.0625rem;
    height: 1.0625rem;
  }
}

.title-name {
  font-size: 0.8125rem;
  color: #222;
}

.right {
  font-size: 0.8125rem;
  color: #ff3a00;
}

.card-wrap {
  margin: 0.625rem 0 0 0;

  .img img {
    width: 5.4063rem;
    height: 5.4063rem;
    border-radius: 0.625rem;
  }
}

.card-main {
  margin: 0 0 0 0.6875rem;
  flex: 3;
  flex-direction: column;

  .name {
    font-size: 0.9375rem;
    color: #222;
  }

  .price {
    font-size: 0.6875rem;
    color: #78777d;
  }

  .num {
    text-align: right;
    font-size: 0.6875rem;
    color: #78777d;
  }

  .time {
    font-size: 0.6875rem;
    color: #ffa200;
    margin: 0.3125rem 0 0 0;
    text-align: left;
  }
}

.order-footer {
  flex-direction: column;

  .total {
    font-size: 0.875rem;
    color: #333;
    text-align: right;
  }
}

.order-btns {
  justify-content: flex-end;
  margin-top: 0.3125rem;
  // flex-wrap: wrap;

  .btn {
    width: 5rem;
    height: 2.0625rem;
    // line-height: 2.125rem;
    // text-align: left;
    border-radius: 0.3125rem;
  }

  .order-buy {
    border: solid 0.0313rem #b3b3b3;
    font-size: 0.8125rem;
    color: #222;
    margin: 0 0.375rem 0.375rem  0;
    background-image: #fff;
    cursor: pointer;
  }

  .order-evaluate {
    background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
    font-size: 0.8125rem;
    color: #fff;
    margin: 0 0.375rem 0.375rem  0;
    border: none;
  }
}

.order-btns .order-buy:last-child,
.order-btns .order-evaluate:last-child {
  margin-right: 0;
}
</style>
